<template>
  <div ref="dom" class="charts chart-pie"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartPie',
  props: {
    value: Array,
    text: String,
    subtext: String,
    color:String
  },
  methods:{
    showPie(){
     this.$nextTick(() => {
      let legend = this.value.map(_ => _.name)
      let option = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          position:'bottom',
          data: legend
        },
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.value,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
             label: {
               normal:{
                  formatter: '{b}\n{d}%' ,
                  color:this.color
               }
             }
          }
        ],
      color:[  "#F3B83C","#FF576E","#3DF1B2","#47A1FF","#9A66E4","#ed3f14","#1C86F1"],
      }
      let dom = echarts.init(this.$refs.dom, 'tdTheme')
      dom.setOption(option)
    });
    }
 
  },
  mounted () {
   this.showPie();
  },
  watch: {
  //观察option的变化
  value: {
   handler(newVal, oldVal) {
    //  console.log(newVal);
    //  console.log('newVal'+newVal,'oldVal')
   
     if (newVal) {
    this.value = newVal;
    this.showPie();
     } else {
        this.value = oldVal;
      this.showPie();
     }
   },
   deep: true //对象内部属性的监听，关键。
  }
 }
}
</script>

<style lang="less">
.charts{
  //
}
</style>
